<!--客服模块-->
<template>
  <div class="customerService">
    <el-row>
      <el-col :span="14">
        <!--  回访-->
        <el-col style="box-shadow:rgba(0,0,0,.3) 0px 0px 10px;">
          <div class="headStyle">
            <el-col :span="3">回访</el-col>
            <!-- <el-col :span="3" style="margin-top: -5px;"><el-button @click="moreClick('回访')">更多</el-button></el-col> -->
            <el-col :span="1" :offset="20">
              <i class="el-icon-more" />
              <div>
                <el-button @click="moreClick('回访')">更多</el-button>
              </div>
            </el-col>
          </div>
          <div class="headStyle">
            <el-col :span="3">未回访：{{ returnVisit.parameter1 }}</el-col>
            <el-col :span="3">已回访：{{ returnVisit.parameter2 }}</el-col>
          </div>
          <div class="headStyle">
            <el-table :data="returnVisit.dto" border :row-class-name="tableColor">
              <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
              <el-table-column label="性别" prop="customerSex" :show-overflow-tooltip="true" />
              <el-table-column label="回访类型" prop="returnVisitType" :show-overflow-tooltip="true" />
              <el-table-column label="计划回访时间" prop="plannedReturnVisitDate" :show-overflow-tooltip="true">
                <template slot-scope="{ row }">
                  <span>{{ row.plannedReturnVisitDate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="计划回访人" prop="revisiterName" :show-overflow-tooltip="true" />
              <el-table-column label="状态" prop="status" :show-overflow-tooltip="true" />
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <el-button type="text" @click="startReturnVisit(row)">开始回访</el-button>
                  <el-button type="text" @click="modifyReturnVisit(row)">修改</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <!--  投诉-->
        <el-col style="margin-top:20px;box-shadow:rgba(0,0,0,.3) 0px 0px 10px;">
          <div class="headStyle">
            <el-col :span="3">投诉</el-col>
            <!-- <el-col :span="3" style="margin-top: -5px;"><el-button @click="moreClick('投诉')">更多</el-button></el-col> -->
            <el-col :span="1" :offset="20">
              <i class="el-icon-more" />
              <div>
                <el-button @click="moreClick('投诉')">更多</el-button>
              </div>
            </el-col>
          </div>
          <div class="headStyle">
            <el-col :span="3">未处理{{ complaint.parameter1 }}</el-col>
            <el-col :span="3">已处理{{ complaint.parameter2 }}</el-col>
          </div>
          <div class="headStyle">
            <el-table :data="complaint.dto" border :row-class-name="tableColor">
              <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
              <el-table-column label="性别" prop="customerSex" :show-overflow-tooltip="true" />
              <el-table-column label="投诉类型" prop="complaintType" :show-overflow-tooltip="true" />
              <el-table-column label="关联内容" prop="projectName" :show-overflow-tooltip="true" />
              <el-table-column label="截止时间" prop="closingDate" :show-overflow-tooltip="true">
                <template slot-scope="{ row }">
                  <span>{{ row.closingDate.split(" ")[0] }}</span>
                </template>
              </el-table-column>
              <el-table-column label="处理人" prop="handlerName" :show-overflow-tooltip="true" />
              <el-table-column label="状态" prop="complaintStatus" :show-overflow-tooltip="true" />
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <el-button type="text" @click="handleComplaint(row,true)">查看</el-button>
                  <el-button type="text" @click="handleComplaint(row)">开始处理</el-button>
                  <el-button type="text" @click="modifyComplaint(row)">修改</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <StartReturnVisit v-if="statrVisible" :visible.sync="statrVisible" :current-row="startReturnVisitContent" @handleClose="statrVisible = false" @handleSuccess="startHnadle" />
    <AddReturnVisit v-if="visible" :visible.sync="visible" :return-visit-type-list="orderTypeList" :current-row="currentRow" @handleClose="visible = false;currentRow={}" @handleSuccess="handleSuccess" />

    <AddComplaint v-if="complaintVisible" :visible.sync="complaintVisible" :complaint-type-list="complaintTypeList" :complaint-mode-list="complaintModeList" :current-row="complaintCurrentRow" @handleClose="complaintVisible= false;complaintCurrentRow={};" @handleSuccess="complaintHandleSuccess" />
    <HandleWorkOrder v-if="complaintStatrVisible" :visible.sync="complaintStatrVisible" :current-row="currentRowDetails" @handleClose="startHnadle" @handleSuccess="complaintHandleSuccess" />
    <SeeComplaint v-if="visibleDetails" :visible.sync="visibleDetails" :current-row="currentRowDetails" @handleClose="visibleDetails= false;" />
  </div>
</template>

<script>
import StartReturnVisit from "@/views/returnVisit/startReturnVisit";
import AddReturnVisit from "@/views/returnVisit/addreturnVisit";
import AddComplaint from "@/views/returnVisit/complaint/addComplaint";
import HandleWorkOrder from "@/views/returnVisit/complaint/handleWorkOrder";
import SeeComplaint from "@/views/returnVisit/complaint/seeComplaint";
import { tableColor } from '@/utils/common.js';
export default {
  components: {
    StartReturnVisit,
    AddReturnVisit,
    AddComplaint,
    HandleWorkOrder,
    SeeComplaint,
  },
  data() {
    return {
      returnVisit: {},
      complaint: {},
      loading: false,
      type: "",
      tableColor,
      visible: false,
      statrVisible: false,
      startReturnVisitContent: {},
      currentRow: {},
      orderTypeList: [{ id: 0, value: "不限回访类型", label: "" }, { id: 1, value: "未上门回访", label: "未上门回访" }, { id: 2, value: "未成交回访", label: "未成交回访" }, { id: 3, value: "术前回访", label: "术前回访" }, { id: 4, value: "术后回访", label: "术后回访" }, { id: 5, value: "一般回访", label: "一般回访" }],
      complaintVisible: false, // 投诉
      complaintCurrentRow: {},
      visibleDetails: false,
      complaintStatrVisible: false,
      currentRowDetails: {},
      complaintTypeList: [{ id: 0, value: "不限投诉类型", label: "" }, { id: 1, value: "服务", label: "服务" }, { id: 2, value: "治疗效果", label: "治疗效果" }, { id: 3, value: "收费", label: "收费" }, { id: 4, value: "其他", label: "其他" }],
      complaintModeList: [{ id: 0, value: "不限投诉方式", label: "" }, { id: 1, value: "电话投诉", label: "电话投诉" }, { id: 2, value: "网络投诉", label: "网络投诉" }, { id: 3, value: "现场投诉", label: "现场投诉" }],
    };
  },
  created() {
    this.getReturnVisitList();
    this.getComplaintList();
  },
  methods: {
    async getReturnVisitList() {
      this.loading = true;
      const res = await this.$api['workbench/workbench/returnVisitList']({});
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询回访记录失败！');
      this.returnVisit = res.data;
    },
    async getComplaintList() {
      this.loading = true;
      const res = await this.$api['workbench/workbench/complaintList']({});
      this.loading = false;
      if (res.code !== 200) return this.$message.error('查询投诉记录失败！');
      this.complaint = res.data;
    },
    startHnadle() {
      this.statrVisible = false;
      this.complaintStatrVisible = false;
      this.getReturnVisitList();
    },
    async startReturnVisit(row) {
      const res = await this.$api['data/returnVisit/getReturnVisit']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.startReturnVisitContent = JSON.parse(JSON.stringify(res.data));
      this.statrVisible = true;
    },
    handleSuccess() {
      this.visible = false;
      this.currentRow = {};
      this.complaintStatrVisible = false;
      this.currentRowDetails = {};
      this.getReturnVisitList();
    },
    async modifyReturnVisit(row) {
      const res = await this.$api['data/returnVisit/getReturnVisit']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.currentRow = JSON.parse(JSON.stringify(res.data));
      this.visible = true;
    },
    async handleComplaint(row, isTrue) {
      const res = await this.$api['data/complaint/getComplaintDetails']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.currentRowDetails = JSON.parse(JSON.stringify(res.data));
      if (isTrue) {
        this.visibleDetails = true;
      } else {
        this.complaintStatrVisible = true;
      }
    },
    async modifyComplaint(row) {
      const res = await this.$api['data/complaint/getComplaintDetails']({ id: row.id });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.complaintCurrentRow = JSON.parse(JSON.stringify(res.data));
      this.complaintVisible = true;
    },
    complaintHandleSuccess() {
      this.complaintVisible = false;
      this.complaintCurrentRow = {};
      this.complaintStatrVisible = false;
      this.currentRowDetails = {};
      this.getComplaintList();
    },
    moreClick(name) {
      if (name === '回访') {
        this.$router.push({ path: "/swan/returnVisit/index" });
      } else {
        this.$router.push({ path: "/swan/returnVisit/complaint" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.headStyle{
  margin-top: 20px;
  padding: 10px;
}
.customerService{
  margin-top: 20px;
}
@import '../css/reception.scss'
</style>
